import React, { PureComponent } from 'react'
import { SideBar } from 'antd-mobile'
import Header from '../../components/Header/Header'
import { Link } from 'react-router-dom'
import { $pre } from '../../http/http'
import "./Cate.less"
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { actions, getCate, getGoods } from '../../store/modules/cate'


class Cate extends PureComponent {

  componentDidMount() {
    let { cates: { reqCate, reqGoods } } = this.props
    reqCate()
    reqGoods()
  }
  render() {
    let { cate, goods, cates: { reqGoods } } = this.props
    return (
      <div className='cate'>
        <Header title="商品分类" back></Header>
        <SideBar defaultActiveKey="1" onChange={v => reqGoods(v)}>
          {cate.map(item => (
            <SideBar.Item key={item.id} title={item.catename} />
          ))}
        </SideBar>
        <ul className='goods'>
          {
            goods.map(item => {
              return (
                <Link key={item.id} to={"/detail/" + item.id}>
                  <li>
                    <img src={$pre + item.img} alt="" />
                    <h3>{item.goodsname}</h3>
                    <p>￥<span>{item.price}</span></p>
                    <del>￥{item.market_price}</del>
                  </li>
                </Link>
              )
            })
          }
        </ul>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    cate: getCate(state),
    goods: getGoods(state)
  }
}
const mapDispatchToProps = dispatch => {
  return {
    cates: bindActionCreators(actions, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Cate)